<template>
  <el-dialog title="新增邮件配置" v-model="dialogVisible" width="30%">
    <el-form-item label="邮件配置名称">
      <el-input v-model="mailConfName" clearable></el-input>
    </el-form-item>

    <template #footer>
      <span>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addMailConf">确认</el-button>
      </span>
    </template>
  </el-dialog>

  <el-row style="padding-top: 20px">
    <el-col :span="16" :offset="3">
      <el-form label-width="140px" size="large">
        <el-form-item label="收件人列表">
          <el-input v-model="selectedMailConf.receiverList" />
        </el-form-item>
        <el-form-item label="抄送列表">
          <el-input v-model="selectedMailConf.copyList" />
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <el-row>
    <el-col :offset="12" :span="7" align="right">
      <el-button type="success" size="default" @click="previousStep"
        >上一步</el-button
      >

      <el-button type="primary" @click="sendReportMail">发送</el-button>
      <el-button type="primary" @click="dialogVisible = true"
        >配置另存为</el-button
      >
      <el-button type="primary" @click="saveMailConf">配置保存</el-button>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { useMailConfStore } from "@/stores/mailConfStore";
import {
  addSunnyMailConfApi,
  sendReportMailApi,
  updateSunnyMailConfApi,
} from "@/api/sunnymail";
import type { SunnyMailConfBO } from "@/types/sunnyMailConf/type";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from "vue";

const dialogVisible = ref(false);
const mailConfName = ref("");
const emit = defineEmits(["refreshList"]);
let { nowStep, selectedMailConf, resultId } = storeToRefs(useMailConfStore());
const previousStep = () => {
  nowStep.value--;
};

const sendReportMail = () => {
  //构造发送邮件时需要的confBO，也就是带上resultId的配置信息
  let mailConfBo: SunnyMailConfBO = {
    ...selectedMailConf.value,
    resultId: resultId.value,
  };
  sendReportMailApi(mailConfBo).then(({ data }) => {
    ElMessage.info(data);
    saveMailConf();
  });
};

const addMailConf = () => {
  dialogVisible.value = false;
  //深拷贝
  let newMailConf = { ...selectedMailConf.value };
  newMailConf.name = mailConfName.value;
  newMailConf.id = 0;
  addSunnyMailConfApi(newMailConf).then(({ msg }) => {
    ElMessage.info(msg);
    emit("refreshList");
  });
};

const saveMailConf = () => {
  dialogVisible.value = false;
  //如果没有选择邮件配置，新增一个配置并保存
  if (selectedMailConf.value.id === 0) {
    ElMessageBox.prompt(
      "您还没有为这个配置项取名，如果确定需要保存，请为它取名",
      "未命名配置"
    ).then(({ value }) => {
      let newMailConf = { ...selectedMailConf.value };
      newMailConf.name = value;
      newMailConf.id = 0;
      addSunnyMailConfApi(newMailConf).then(({ msg }) => {
        ElMessage.info(msg);
        emit("refreshList");
      });
    });
  } else {
    //选择了邮件配置则更新邮件配置
    updateSunnyMailConfApi(selectedMailConf.value).then(({ msg }) => {
      ElMessage.info(msg);
      emit("refreshList");
    });
  }
};
</script>

<style scoped>
:deep(.el-form-item__label) {
  font-size: 16px;
}
</style>
